import React from 'react'
import './index.scss'

// 引入head组件
import Head from 'next/head'
import { Pagination, Icon } from 'antd-mobile';
// 顶部导航
import TopNavigation from '../../components/topNavigation'
// banner
import Banner from '../../components/banner'
// nav栏
import CaseNav from './caseNav'
// 详情
import CaseDetail from './caseDetail'

// 右侧导航
import Navigation from '../../components/navigation'
// 底部组件
import Footer from '../../components/footer'

// redux 数据
import store from '../../store'

import {getHeadAndTailData,getProjectCateData, getProjectData} from '../../api/api'
export default class Case extends React.Component{
    constructor(props) {
        super(props);
        let {remUrl} = store.getState()
        this.state = {
            // 控制右侧侧边栏展示隐藏
            displayNav: false,
            currentNav:0,
            // 每页默认条数
            limit: 4,
            // 当前页数
            page: 1,
            // 总页数
            total:  Math.ceil(props.projectData.data.total / 4),
            // 当前id
            currentId: props.currentId,
            projectCateData: props.projectCateData.data,
            projectData: props.projectData.data,
            remUrl,
            navFrag:true,
        }
    }
    static async  getInitialProps(){
        // 获取项目案例分类
        let projectCateData = await getProjectCateData()
        // 底部数据
        let footerData = await getHeadAndTailData()
        // 根据项目分类ID获取项目案例列表
        let projectData = await getProjectData(projectCateData.data[0].id,1,4)
        // 当前id
        let currentId = projectCateData.data[0].id
        return{
            projectCateData,
            projectData,
            currentId,
            footerData: footerData.data
        }
    }

    render(){
        return(
            <>
                <Head>
                    <meta charSet='utf-8'/>
                    <title>{this.props.footerData.info.case_title}</title>
                    <meta name="keywords" content={this.props.footerData.info.case_keywords} />
                    <meta name="description" content={this.props.footerData.info.case_description}/>
                    <link rel="icon" href={this.props.footerData.web_icon}/>
                    <script src={this.state.remUrl}></script>

                </Head>

                <div className='case' onClick={this.downDisplayNav.bind(this)}>
                    {/*顶部导航*/}
                    <TopNavigation title={'case'} changeDisplayNav={this.changeDisplayNav.bind(this)}/>
                    {/*banner图*/}
                    <Banner type={'case'}/>
                    {/*nav栏*/}
                    <CaseNav projectCateData={this.state.projectCateData} currentNav={this.state.currentNav} getProjectDatas={this.getProjectDatas.bind(this)}  />
                    {/*详情*/}
                    <CaseDetail projectData={this.state.projectData.data} />
                    {/*分页*/}
                    <div className='pagination'>
                        <Pagination total={this.state.total}
                                    className="custom-pagination-with-icon"
                                    // 这里传入的是字符串 不是数字 需要进行隐式转换
                                    current={+this.state.projectData.current_page}
                                    onChange={(page) => {this.changeProject(page)}}
                                    locale={{
                                        prevText: (<span className="arrow-align">上一页</span>),
                                        nextText: (<span className="arrow-align">下一页</span>),
                                    }}
                        />
                    </div>
                    {/*右侧导航*/}
                    <Navigation  navFrag={this.state.navFrag} displayNav={this.state.displayNav} />

                </div>
                {/*底部*/}
                <Footer footerData={this.props.footerData} />
            </>

        )
    }
    changeDisplayNav(){
        this.setState({
            displayNav: !this.state.displayNav,
            navFrag: false
        })
    }
    async getProjectDatas(id,index){
        let {data} = await getProjectData(id, this.state.page, this.state.limit)
        this.setState({
            projectData: data,
            currentNav:  index,
            currentId:id,
            total:  Math.ceil(data.total / 4)
        })
    }
    async changeProject(page){
        let {data} = await getProjectData(this.state.currentId,page,this.state.limit)
        this.setState({
            projectData: data,
            total: Math.ceil(data.total / 4)
        })
    }
    downDisplayNav(){
        this.state.displayNav && (
            this.setState({
                displayNav: false
            })
        )
    }
}
